<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
              <div class="panel-heading">
                    <h3 class="panel-title">实时数据获取</h3>
              </div>
              <div class="panel-body">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>message</th>
                            </tr>
                        </thead>
                        <tbody id='messageContent'>
                            <tr>
                                <td>初始化</td>
                            </tr>
                        </tbody>
                    </table>
              </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <script>
        $(()=> {
            var socket = io('http://localhost:9875');
            socket.on('message',data => {
                $('#messageContent').html(
                    `
                        <tr>
                            <td>${data.message}</td>
                        </tr>
                    `
                )
            });
            setTimeout(() => {
                socket.close();
            },3000)

            // loopGetData()
        })
        /** 遍历获取数据 */
        function loopGetData() {
            $.ajax({
                url: '/intime/data',
                method: 'get',
                success: function(data) {
                    timeCounter()
                    if(data.code === 200){
                        $('#messageContent').html(
                            `
                                <tr>
                                    <td>111${data.message}</td>
                                </tr>
                            `
                        );
                    }
                },
                error: function() {
                    timeCounter()
                }
            })
        }

        function timeCounter() {
            var timer = setTimeout(() => {
                clearTimeout(timer)
                timer = null
                loopGetData()
            }, 1000);
        }

    </script>
</body>
</html>